<script setup>
import {useRootSetting} from '@/hooks/setting/useRootSetting';
import AppLogo from "@/components/AppLogo.vue";
import Sidebar from "@/components/Sidebar.vue";
import MinSidebar from "@/components/MinSidebar.vue";
import {ref} from 'vue';
import Setting from "@/components/Setting.vue";


const drawer = ref(false);
const {appConfig} = useRootSetting();
</script>

<template>
  <div class="navbar">
    <div v-show="!appConfig.hideNavbart" class="navbar-content">
      <div class="navbar-left">
        <AppLogo v-if="appConfig.sidebarMode === 'horizontal' "/>
      </div>
      <div class="navbar-center">
        <template v-if="!appConfig.drawerSidebar">
          <Sidebar v-if="appConfig.sidebarMode === 'horizontal'" class="sidebar-horizontal" mode="horizontal"/>
          <MinSidebar v-if="appConfig.sidebarMode === 'blend'" class="sidebar-horizontal" mode="horizontal"/>
        </template>
      </div>
      <div class="navbar-right">
        <!--    设置    -->
        <el-button class="cursor" name="iEL-setting" @click="drawer = true"/>
      </div>
    </div>
    <!--  弹窗  -->
    <Setting v-model:model-value="drawer"/>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  border-bottom: 1px solid #E4E7EDFF;
  // margin-left: #{$side-bar-width};
  background-color: $nav-bar-color;
  box-shadow: 1px 0 20px rgb(0 0 0 / 8%);

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: #{$nav-bar-height};
    font-size: 18px;

    // .navbar-left {
    //   display: flex;
    //   align-items: center;
    // }

    .navbar-center {
      flex: 1;
      min-width: 0;
      height: 100%;
    }

    .navbar-right {
      display: grid;
      grid-auto-flow: column;
      grid-gap: 10px;
      align-items: center;
      margin-right: 10px;
    }
  }

  .setting-icon {
    display: flex;
    position: fixed;
    z-index: 99;
    top: 50%;
    right: 0;
    padding: 8px;
    transform: translateY(-50%);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    background-color: #409EFFFF;
    color: #fff;
    font-size: 18px;
  }
}
</style>
